<template>
    <div>
        <!-- <el-form-item :label="$t('name')">
            <el-input v-model="reader.name" disabled />
        </el-form-item>-->
        <el-form-item :label="$t('jdbcUrl')" :prop="$t('jdbcUrl')">
            <el-input v-model="reader.parameter.connection[0].jdbcUrl[0]" />
        </el-form-item>
        <el-form-item :label="$t('username')" :prop="$t('username')">
            <el-input v-model="reader.parameter.username" />
        </el-form-item>
        <el-form-item :label="$t('password')" :prop="$t('password')">
            <el-input v-model="reader.parameter.password" />
        </el-form-item>
        <el-form-item :label="$t('writeMode')">
            <el-select v-model="searchMode" placeholder="Select" @change="handleModeChange">
                <el-option v-for="item in searchModes" :key="item" :label="item" :value="item"></el-option>
            </el-select>
        </el-form-item>
        <template v-if="searchMode === '标准查询'">
            <el-form-item :label="$t('table')" :prop="$t('table')">
                <el-input v-model="reader.parameter.connection[0].table[0]" />
            </el-form-item>
            <el-form-item :label="$t('splitPk')" :prop="$t('splitPk')">
                <el-input v-model="reader.parameter.splitPk" />
            </el-form-item>
            <!-- <el-form-item :label="$t('column')" :prop="$t('column')">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="reader.parameter.column"
                />
            </el-form-item>-->
            <el-form-item :label="$t('column')" :prop="$t('column')">
                <div class="column-box" v-for="(column, i) in reader.parameter.column" :key="i">
                    <el-input
                        :ref="el => { if (el) columns[i] = el }"
                        v-model="reader.parameter.column[i]"
                    />
                    <div class="remove-icon">
                        <el-button
                            type="danger"
                            circle
                            :icon="SemiSelect"
                            size="mini"
                            @click="removeReaderColumn(i)"
                        ></el-button>
                    </div>
                </div>
                <el-button
                    type="primary"
                    plain
                    style="width:100%;border-style: dashed;"
                    :icon="Plus"
                    @click="addReaderColumn"
                ></el-button>
            </el-form-item>
        </template>
        <template v-else>
            <el-form-item :label="$t('querySql')" :prop="$t('querySql')">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="reader.parameter.connection[0].querySql[0]"
                />
            </el-form-item>
        </template>
    </div>
</template>

<script setup>
import { Plus, SemiSelect } from '@element-plus/icons-vue'
import { ref, watch, onBeforeUpdate, nextTick } from "vue";
import { useStore } from 'vuex'

const store = useStore()

const searchModes = ['标准查询', '自定义查询']

const searchMode = ref('标准查询')

const reader = ref({
    "name": "oraclereader",
    "parameter": {
        "username": "",
        "password": "",
        "column": [],
        "splitPk": "",
        "connection": [
            {
                "table": [],
                "jdbcUrl": []
            }
        ]
    }
})

const columns = ref([])
// 确保在每次更新之前重置ref
onBeforeUpdate(() => {
    columns.value = []
})

store.commit('setReader', reader.value)

watch(
    reader,
    (state, prevState) => {
        store.commit('setReader', state)
    },
    { deep: true }
)

const handleModeChange = (val) => {
    if (val === '标准查询') {
        reader.value.parameter.column = []
        reader.value.parameter.connection[0].table = []
        delete reader.value.parameter.connection[0].querySql
    } else {
        delete reader.value.parameter.column
        delete reader.value.parameter.connection[0].table
        reader.value.parameter.connection[0].querySql = []
    }
}

const addReaderColumn = () => {
    reader.value.parameter.column.push('')
    focusInput()


}

const removeReaderColumn = (index) => {
    reader.value.parameter.column.splice(index, 1)
    columns.value.pop()
    focusInput()
}

const focusInput = async () => {
    await nextTick()
    if (columns.value.length > 0) {
        columns.value[columns.value.length - 1].focus()
    }
}
</script>

<style scoped>
.column-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.remove-icon {
    width: 50px;
    display: flex;
    justify-content: center;
}
</style>